<form nz-form [nzLayout]="'inline'" class="ant-advanced-search-form">
  <nz-form-item>
    <nz-form-label>{{l('site_alone')}}</nz-form-label>
    <nz-form-control>
      <nz-select name="select-1" [(ngModel)]="siteId" (ngModelChange)="changeSite()"
                 [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="l('please_select_site')">
        <nz-option [nzValue]="''" [nzLabel]="l('please_select_site')"></nz-option>
        <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('lockset_no')}}</nz-form-label>
    <nz-form-control>
      <nz-input-group nzSuffixIcon="anticon">
        <input type="text" [(ngModel)]="keyword" nz-input [ngModelOptions]="{standalone: true}"
               [placeholder]="l('please_enter_lockset_no')">
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('lockset')}}{{l('state')}}</nz-form-label>
    <nz-form-control>
      <nz-checkbox-group [ngModelOptions]="{standalone: true}" [(ngModel)]="checkStatusList"></nz-checkbox-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item class="control-area">
    <button nz-button [nzType]="'primary'" (click)="load()">{{l('search')}}</button>
    <button nz-button (click)="reset()">{{l('reset')}}</button>
  </nz-form-item>
</form>

<div class="table-control-wrap">
  <button nz-button nzType="primary" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i>{{l('create')}}
  </button>
  <button nz-button nzType="primary" (click)="fileSelect.click()"><i class="anticon anticon-cloud-upload-o"></i>{{l("batch_import")}}
  </button>
  <input #fileSelect type="file" ng2FileSelect [uploader]="uploader" style="display:none"/>
</div>
<nz-table nzBordered nzNoResult=" ">
  <thead>
  <tr>
    <th *ngIf="!siteId">{{l('all_site')}}：{{sites.length}}</th>
    <th *ngIf="siteId">{{siteName}}</th>
    <th *ngIf="!siteId">{{l('lockset_total_count')}}：{{statistics.totalCount}}</th>
    <th *ngIf="siteId">{{l('lockset_total_count')}}：{{tableHelper.totalCount}}</th>
    <th *ngIf="!siteId">{{l('undistributed_count')}}：{{statistics.unAllot}}</th>
    <th>{{l('stock_in_transit_count')}}：{{statistics.inTransit}}</th>
  </tr>
  </thead>
</nz-table>
<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1300px'}" [nzFrontPagination]="false"
          [nzData]="tableHelper.items"
          [nzLoading]="tableHelper.loading" [nzTotal]="tableHelper.totalCount" [(nzPageIndex)]="tableHelper.pageIndex"
          [nzShowTotal]="totalTemplate" [(nzPageSize)]="tableHelper.pageSize" (nzPageIndexChange)="load()"
          (nzPageSizeChange)="load()">
  <thead>
  <tr>
    <th nzWidth="70px" nzLeft="0px">{{l('serial_number')}}</th>
    <th nzWidth="200px" nzLeft="70px">{{l('lockset_no')}}</th>
    <th>{{l('sim_no')}}</th>
    <th>{{l("site_alone")}}</th>
    <th>{{l('lockset')}}{{l('state')}}</th>
    <th>{{l('view_address')}}</th>
    <th>{{l('remark')}}</th>
    <th nzWidth="140px" nzRight="0px">{{l('operation')}}</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of ajaxTable.data;let i = index">
    <td nzLeft="0px">{{i++1}}</td>
    <td nzLeft="70px">{{data.lockNo}}</td>
    <td>{{data.simNum}}</td>
    <td>{{data.siteName}}</td>
    <td>{{data.stateName}}</td>

    <td>
      <a (click)="showAddress(data.lockNo)" *ngIf="data.state==1&&data.hasUsed">{{l('view_real_address')}}</a>
      <a (click)="showAddress(data.lockNo)" *ngIf="data.state==2&&data.hasUsed">{{l('view_last_address')}}</a>
    </td>
    <td>{{data.reason}}</td>
    <td nzRight="0px">
      <a (click)="setSite(data.id)" *ngIf="!data.siteId">{{l('distribution')}}</a>
      <a (click)="showModal(data.id)" *ngIf="data.siteId">{{l('edit')}}</a>
      <nz-divider nzType="vertical" *ngIf="data.siteId"></nz-divider>
      <a (click)="handleUsing(data)" *ngIf="!data.enableFlag&&data.siteId">{{l('enable')}}</a>
      <a (click)="handleUsing(data)" *ngIf="data.enableFlag&&data.siteId">{{l('disenable')}}</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
          [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="lockNo">{{l("lockset_no")}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="lockNo" id="lockNo" [(ngModel)]="model.lockNo">
        <nz-form-explain *ngIf="validateForm.get('lockNo').hasError('required')">{{l('please_enter_lockset_no')}}</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('lockNo').hasError('maxlength')">{{l('please_enter_max_length')}}255</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="simNum">{{l('sim_no')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="simNum" id="simNum" [(ngModel)]="model.simNum">
        <nz-form-explain *ngIf="validateForm.get('simNum').hasError('required')">{{l('please_enter_sim_no')}}</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('simNum').hasError('maxlength')">{{l('please_enter_max_length')}}255</nz-form-explain>
     
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzFor="siteId">{{l('site_alone')}}</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="siteId" [(ngModel)]="model.siteId" [nzPlaceHolder]="l('please_select_site')">
          <nz-option [nzValue]="''" [nzLabel]="l('please_select_site')"></nz-option>
          <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('siteId').errors">{{l('please_select_site')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>

<nz-modal [(nzVisible)]="isVisibleSite" [nzTitle]="l('distribution')" (nzOnCancel)="handleCancel()"
          (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item nzFlex>
      <nz-form-label nzFor="siteId">{{l('site_alone')}}</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="siteId" [(ngModel)]="model.siteId" [nzPlaceHolder]="l('please_select_site')">
          <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('siteId').errors">{{l('please_select_site')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>


<app-lock-address-modal #lockAddressModal></app-lock-address-modal>
<app-set-device-reason-modal #setDeviceReasonModal (modalSave)="load()"></app-set-device-reason-modal>
